<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main">
        <div id="box1">段落内容1</div>
        <div id="box2">段落内容2</div>
        <div id="box3">段落内容3</div>
    </div>
</body>
<script>
    var div =document.getElementById('main');
    /* parentNode返回值是Node对象(不能操作)
    可以是任意节点,比如:文本节点,元素节点等 */
    var f=div.parentNode
    console.log(f);

    //Element返回值只能是Element对象,可以操作;
    var f1=div.parentElement

    //获取下一个元素 返回值是Element对象,可以操作
    var next1=div.nextElementSibling;
    //获取下一个节点 返回值是Node对象(#text),不能操作同上
    var next2=div.nextSibling;
    var div2=document.getElementById('box2');

    //获取上一个元素
    var up1=div.previousElementSibling;
    //获得上一个节点(幽灵节点)
    var up2=div.previousSibling;

    // 获得第一个子元素
    var son2=div.firstElementChild;
    // 获得第一个子节点(幽灵节点)
    var son1=div.firstChild;

    // 获得最后一个子节点
    var son3=div.lastElementChild;
    // 获得最后一个子节点(幽灵节点)
    var son3=div.lastChild;

    // 获取所有孩子节点(包括空,换行等)
    var all=div.childNodes;

</script>
</html>